<template>
  <div class="nenuEdit">
    <div class="menuHead">
      <div class="item">
        <span>菜单名称:</span>
        <n-input placeholder="输入用户id" v-model:value="parameter.menuName" />
      </div>
      <div class="item">
        <span>菜单状态:</span>
        <n-select class="selectItem" v-model:value="parameter.menuState" :options="optionSelect" placeholder="请选择状态" />
      </div>
      <div class="itemBtn">
        <n-button attr-type="button" type="info" @click="queryBtn">查询</n-button>
        <n-button attr-type="button">重置</n-button>
      </div>
    </div>
    <div class="nenuTable">
      <div>
        <n-button attr-type="button" type="info" @click="addMdol">新增</n-button>
      </div>
      <n-data-table max-height="300" :columns="columns" :data="menuData" :pagination="pagination"
        :row-key="(rowData) => (rowData._id)" />
    </div>
    <div v-if="menuModal">
      <menuModalVue :menuModal='menuModal' :modalType="modalType" :modalDta="modalDta" @getMenuModal='getMenuModal' />
    </div>

  </div>
</template>
<script lang="ts">
import { h, reactive, ref, toRefs, defineComponent, onMounted } from 'vue'
import { NTag, NButton, DataTableColumns,useMessage  } from 'naive-ui'
// @ts-ignore
import menuModalVue from './component/menuModal.vue'
import { menusList, menusAdd } from '../../../api/menu.js'
const message = useMessage()
type RowData = {
  name: string
  index: string
  children?: RowData[],
  age?: number,
  address?: string,
  tags?: string[]
}



export default defineComponent({
  components: {
    menuModalVue
  },

  setup() {
    const columns: DataTableColumns<RowData> = [
      {
        title: '菜单名称',
        key: 'menuName'
      },
      {
        title: '图标',
        key: 'icon'
      },
      {
        title: '权限标识',
        key: 'mneuCode'
      },
      {
        title: '路由地址',
        key: 'path'
      },
      {
        title: '组件路径',
        key: 'commentPath'
      },
      {
        title: '菜单类型',
        key: 'menuType',
        render(row) {
          // @ts-ignore
          return row?.menuType == 1 ? '菜单' : row?.menuType == 2 ? "按钮" : ''
        }
      },
      {
        title: '菜单状态',
        key: 'menuState',
        render(row) {
          // @ts-ignore
          return row?.menuState == 1 ? '正常' : row?.menuState == 2 ? "禁用" : ''
        }
      },
      {
        title: '创建时间',
        key: 'createTime',
        render: (row) => {
           // @ts-ignore
          return row?row?.createTime.split('T')[0]:''
        }
      },
      {
        title: '操作',
        width: '210',
        key: 'actions',
        render(row) {
          return h(
            'div',
            [
              h(
                NButton,
                {
                  type: "primary",
                  onClick: () => {
                    methods.onesAdd(row)
                  }
                }, '新增'
              ),
              h(
                NButton,
                {
                  class: 'editBtn',
                  type: "info",
                  onClick: () => {
                    methods.editShow(row)
                  }
                }, '编辑'
              ),
              h(
                NButton,
                {
                  type: "error",
                  onClick: () => {
                    methods.deleteMenu(row)
                  }


                }, '删除'
              ),
            ]
          )
        }
      }
    ]
    const state = reactive({
      optionSelect: [
        {
          label: '正常',
          value: 1
        }, {
          label: '禁用',
          value: 2
        }
      ],
      menuModal: false,
      menuData: [],
      modalType: 'add',
      modalDta: [],
      parameter: {
        menuName: '',
        menuState: '',
      }
    })
    const menuListData = (item) => {
      menusList(item).then(res => {
        state.menuData = res
      })
    }
    onMounted(() => {
      menuListData({})
    })

    const enumDom = ref()
    onMounted(() => {
      console.log(enumDom.value)
    })
    const methods = reactive({
      //查询
      queryBtn: () => {
        menuListData(state.parameter)
      },
      //新增 
      addMdol: () => {
        state.modalType = 'add'
        state.menuModal = true
      },
      //弹窗回调
      getMenuModal: (item) => {
        state.menuModal = false
        menuListData({})
      },
      //单个新增
      onesAdd(item) {
        state.modalType = 'oneAdd'
        state.menuModal = true
        state.modalDta = item
      },
      editShow(item) {
        state.modalType = 'edit'
        state.menuModal = true
        state.modalDta = item
      },
      deleteMenu(item) {
        let data = { _id: item._id, action: 'del' }
        menusAdd(data).then(res => {
          menuListData({})
        })
      }
    })

    return {
      columns,
      rowKey: (row: RowData) => row.index,
      pagination: {
        pageSize: 10
      },
      enumDom,
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss">
.nenuEdit {
  width: 100%;
  height: 100%;
  padding: 10px;

  .nenuTable {
    width: 97%;
    height: 100%;
    padding: 10px;
    background: #fff;

  }

  .editBtn {
    margin: 0 5px;

  }

  .menuHead {
    background: #fff;
    margin-bottom: 10px;
    width: 98.5%;
    display: flex;
    align-items: center;
    font-size: 17px;
    padding: 20px 0;

    .itemBtn {
      display: flex;

      .n-button {
        margin: auto 5px;
      }
    }

    .item {
      display: flex;
      align-items: center;
      margin: 0 10px;

      .selectItem {
        width: 150px;
      }

      span {
        white-space: nowrap;
        display: inline-block;
        padding-right: 12px;
      }
    }
  }
}
</style>